<template>
  <div class="body-box">
    <!-- 第三行数据 -->
    <div class="content-box4">
      <div class="one">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">保洁员出勤率 </span>
            </div>
          </div>

          <div id="WorkOnStandard_ONE" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <!-- 静态数据 -->
      <div class="two">
        <div style="width: 100%; height: 100%">
          <el-row :gutter="12" style="margin: 1% 0"> <el-col :span="4">
              <el-card shadow="always" >
                <div class="ht">保洁人数</div>
                <div class="hd">2103</div>
              </el-card>
            </el-col>
            <el-col :span="4">
              <el-card shadow="always" >
                <div class="ht">公厕总数</div>
                <div class="hd">10</div>
              </el-card>
            </el-col>
            <el-col :span="4">
              <el-card shadow="always" >
                <div class="ht">总客流量</div>
                <div class="hd">2103</div>
              </el-card>
            </el-col>
            <el-col :span="4">
              <el-card shadow="always" >
                <div class="ht">报警次数</div>
                <div class="hd">10</div>
              </el-card>
            </el-col>
            <el-col :span="4">
              <el-card shadow="always" >
                <div class="ht">消耗水量</div>
                <div class="hd">221</div>
              </el-card>
            </el-col>
            <el-col :span="4">
              <el-card shadow="always" >
                <div class="ht">消耗电量</div>
                <div class="hd">459</div>
              </el-card>
            </el-col>
          </el-row>
          <!-- <el-row :gutter="12" style="margin: 2% 0">
            <el-col :span="4">
              <el-card shadow="always" >
                <div class="ht">保洁人数</div>
                <div class="hd">2103</div>
              </el-card>
            </el-col>
            <el-col :span="4">
              <el-card shadow="always" >
                <div class="ht">公厕总数</div>
                <div class="hd">10</div>
              </el-card>
            </el-col>
          </el-row> -->
          <!-- <div style="width: 100%; height: 81%" id="map"></div> -->
        </div>
      </div>
      <!-- <div class="three">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <el-row :gutter="12" style="margin: 3%">
                  <el-col :span="8">
                    <el-card
                      shadow="always"
                      style="background-color: rgba(46, 125, 190, 0.75)"
                    >
                      <div style="color: #fff">今日客流量</div>
                      <div style="color: #fff">2103人</div>
                    </el-card>
                  </el-col>
                  <el-col :span="8">
                    <el-card
                      shadow="always"
                      style="background-color: rgba(46, 125, 190, 0.75)"
                    >
                      <div style="color: #fff">今日客流量</div>
                      <div style="color: #fff">2103人</div>
                    </el-card>
                  </el-col>
                  <el-col :span="8">
                    <el-card
                      shadow="always"
                      style="background-color: rgba(46, 125, 190, 0.75)"
                    >
                      <div style="color: #fff">今日客流量</div>
                      <div style="color: #fff">2103人</div>
                    </el-card>
                  </el-col>
                </el-row>
              </dv-border-box-7>
            </div> -->
      <div class="four">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">水电消耗概览</span>
            </div>
          </div>
          <div id="WorkOnStandard_FOUR" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <div class="five">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">服务人数前五排行</span>
            </div>
          </div>
          <!-- <div
                  id="WorkRatioByCartype"
                  style="width: 98%; height: 200px"
                ></div> -->
          <div id="WorkOnStandard_FIVE" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <div class="six">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">服务总人数概览</span>
            </div>
          </div>
          <div id="WorkOnStandard_SIX" style="width: 98%; height: 200px"></div>
          <!-- <div
                  id="WorkOnStandard_XS"
                  style="width: 98%; height: 200px"
                ></div> -->
        </dv-border-box-7>
      </div>
      <div class="seven">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">空气质量前五排行</span>
            </div>
          </div>
          <el-table :data="tableData" border style="width: 525px; margin: 10px">
            <el-table-column prop="date" label="排名"> </el-table-column>
            <el-table-column prop="name" label="公厕" width="180">
            </el-table-column>
            <el-table-column prop="evaluate" label="空气质量">
            </el-table-column>
            <el-table-column prop="pm" label="PM值"> </el-table-column>
          </el-table>
          <!-- <div
                  id="WorkRatioByCartype"
                  style="width: 98%; height: 200px"
                ></div> -->
        </dv-border-box-7>
      </div>
      <div class="eight">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">服务人群分析</span>
            </div>
          </div>

          <div
            id="WorkOnStandard_EIGHT"
            style="width: 98%; height: 200px"
          ></div>
        </dv-border-box-7>
      </div>

      <div class="nine">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">公厕打扫情况概览</span>
            </div>
          </div>
          <div id="WorkOnStandard_NINE" style="width: 98%; height: 550px"></div>
        </dv-border-box-7>
      </div>
      <div class="ten">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">差评信息统计</span>
            </div>
          </div>
          <!-- <div
                  id="WorkRatioByCartype"
                  style="width: 98%; height: 200px"
                ></div> -->
          <div id="WorkOnStandard_TEN" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>

      <div class="eleven">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">异常报警一览</span>
            </div>
          </div>
          <div style="width: 98%; height: 100px">
            <div class="bj">2023-01-07 15:01:57 富安路公厕 臭味报警</div>
            <div class="bj">2023-01-07 08:01:57 华明大道公厕 紧急呼叫</div>
            <div class="bj">2023-01-07 18:01:57 民和巷中轴厕所 设备异常</div>
          </div>
          <!-- <div
                  id="WorkOnStandard_THREE"
                  style="width: 98%; height: 200px"
                ></div> -->
        </dv-border-box-7>
      </div>
      
      <div class="twelve">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">保洁昨日总出勤率和总完成率</span>
            </div>
          </div>
          <div id="WorkOnStandard_TWELVE" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
    </div>
  </div>
</template>

<script>
import { newMap } from '@/common/map/map.js'
import { optionWorkOnStandard } from '@/components/echart/bar.js'
import { optionWorkOnStandard1 } from '@/components/echart/bar.js'
// import { collectionRate } from '@/components/echart/bar.js'
import { collectionRate2 } from '@/components/echart/bar.js'
// import { incomingQuantity } from '@/components/echart/bar.js'
import { spotsNumbe } from '@/components/echart/bar.js'
import { spotsNumbe2 } from '@/components/echart/bar.js'
import { spotsNumbeH2 } from '@/components/echart/bar.js'
import { brokenLine } from '@/components/echart/bar.js'
import { brokenLine1 } from '@/components/echart/bar.js'

import { optionBarContainBarAndRatio } from '@/components/echart/bar.js'
import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils/index.js'
// import centerLeft1 from './centerLeft1'
// import centerLeft2 from './centerLeft2'
// import centerRight1 from './centerRight1'
// import centerRight2 from './centerRight2'
// import center from './center'
// import bottomLeft from './bottomLeft'
// import bottomRight from './bottomRight'
import * as echarts from 'echarts';
export default {
  mixins: [drawMixin],
  data () {
    return {
      radio1: '上海',
      form: {
        userName: 'dlhw',
        date: '2020-10',
        clientNo: '0000009',
        vehicleData: [{
          排队数: '0',
          车辆总数: '0',
          出动数: '0',
          出动率: '0',
        }],
      },
      MapV: {
        iconLayerDic: {},
        textLayerDic: {},
        dataSetDic: {},
        VIcon_Installations: {},
        VText_Installations: {},
      },
      Data: {
        arrayForType_Rubbish: [],
        arrayCLCPolygonData: [],
        arrayCLCMarkerData: [],
        arrayZZZMarkerData: [],
        arrayNCDMarkerData: [],
        arrayXQCYMarkerData: [],
        arrayCYMarkerData: [],
      },
      isZoomChange: 'S',
      map: null,
      mapZoom: 16,
      timing: null,
      loading: false,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      tableData: [{
        date: '1',
        name: '华明大道公厕',
        evaluate: '优秀',
        pm: '5'
      }, {
        date: '2',
        name: '第一菜市场公厕',
        evaluate: '优秀',
        pm: '8'
      }, {
        date: '3',
        name: '裕和路公厕',
        evaluate: '优秀',
        pm: '10'
      }, {
        date: '4',
        name: '顶秀家园公厕',
        evaluate: '优秀',
        pm: '11'
      }, {
        date: '5',
        name: '法治广场公厕',
        evaluate: '优秀',
        pm: '15'
      }]
    }
  },
  components: {
    // centerLeft1,
    // centerLeft2,
    // centerRight1,
    // centerRight2,
    // center,
    // bottomLeft,
    // bottomRight
  },
  mounted () {
    // this.initWorkOnStandard_SS()
    // this.initWorkOnStandard_CX()
    // this.initWorkOnStandard_XS()
    // this.initWorkOnStandard_JS()
    this.initWorkOnStandard_ONE()
    this.initWorkOnStandard_FOUR()
    this.initWorkOnStandard_FIVE()
    this.initWorkOnStandard_SIX()
    this.initWorkOnStandard_EIGHT()
    this.initWorkOnStandard_NINE()
    this.initWorkOnStandard_TEN()
    this.initWorkOnStandard_TWELVE()

    this.initWorkRatioByCartype()
    this.timeFn()
    this.mapShow();
    this.selectChange();
    this.getVehicleInfo();
    this.getInfoList();
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    async mapShow () {
      // 百度地图API功能
      this.map = newMap();
      // 初始化地图,设置中心点坐标和地图级别
      this.map.centerAndZoom("天津市", 9);
      this.map.setMapStyleV2({ styleId: "0ea9da99f69d56246d9910bfd0f7c26b" });
      //添加缩略地图控件

      this.map.addControl(new BMap.OverviewMapControl());
      function addMapOverlay (cityName) {
        let bdary = new BMap.Boundary();
        bdary.get(cityName, rs => { //获取行政区域

          let EN_JW = "180, 90;"; //东北角
          let NW_JW = "-180, 90;"; //西北角
          let WS_JW = "-180, -90;"; //西南角
          let SE_JW = "180, -90;"; //东南角
          // max length index
          let maxIndex = -1
          let maxLength = 0
          for (let i = 0; i < rs.boundaries.length; i++) {
            if (rs.boundaries[i].length > maxLength) {
              maxLength = rs.boundaries[i].length
              maxIndex = i
            }
          }

          // 添加环形遮罩层(圈出最大区域，剩余遮罩)
          let ply1 = new BMap.Polygon(rs.boundaries[maxIndex] + ';' + rs.boundaries[maxIndex].split(";")[0] +
            ';' + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, {
            strokeColor: "none",
            fillColor: "#000",
            fillOpacity: 1,
            strokeOpacity: 0.5
          }
          );
          // 建立多边形覆盖物
          this.map.addOverlay(ply1);
          // 添加边界
          var pointArray = [];
          for (var i = 0; i < rs.boundaries.length; i++) {
            var ply = new BMap.Polygon(rs.boundaries[i], {
              strokeWeight: 3,
              strokeColor: "#ffff00",
              fillColor: ""
            }); //建立多边形覆盖物
            this.map.addOverlay(ply); //添加覆盖物
            pointArray = pointArray.concat(ply.getPath());
          }
          this.map.setViewport(pointArray);
        });
      }
      addMapOverlay("天津市")

      //缩放屏幕
      const _this = this;

      this.map.addEventListener('zoomend', function (e) {
        // console.log("地图缩放至：" + this.getZoom() + "级");
        // var aa = e.target.getZoom();
        if (e.target.getZoom() > 12 && _this.isZoomChange === 'S') {
          _this.isZoomChange = 'B';
          for (var key in _this.MapV.textLayerDic) {
            _this.MapV.textLayerDic[key].show();
          }
          _this.drawMapV()
        }
        if (e.target.getZoom() <= 10 && _this.isZoomChange === 'B') {
          _this.isZoomChange = 'S';
          for (var key1 in _this.MapV.textLayerDic) {
            _this.MapV.textLayerDic[key1].hide();
          }
          _this.drawMapV()
        }
      });
      // var mapStyle={  style : "midnight" }
      // this.map.setMapStyle(mapStyle);
      // this.map.setBack;
      // 点击屏幕
      this.map.addEventListener("click", function (e) {
        console.log(e.point.lng);
      });
    },
    // 画MapV图层
    drawMapV () {
      var mapv = require("mapv");
      for (var key in this.MapV.dataSetDic) {
        this.MapV.dataSetDic[key].set([]);
      }
      //因为需要加载不同的图片，所以将车辆数据按车辆类型、是否在线分成不同数组this.Data.arrayForType_Veicle

      this.Data.arrayForType_Rubbish.forEach((arrayDataForSameIcon) => {
        //如果数据中无数据，退出循环,不然下方arrayDataForSameIcon[0].CARTYPE报错
        if (arrayDataForSameIcon.length == 0) {
          return;
        }

        const _self = this;

        let img = new Image();
        img.src = require("@/assets/img/MapMarker/wcToilet/" + arrayDataForSameIcon[0].img +
          this.isZoomChange +
          ".png");

        img.onload = function () {
          //循环加载同一张图片的车辆数据
          let arrayImage = arrayDataForSameIcon.map((v) => {
            v.geometry = {
              type: "Point",
              coordinates: [v.LNG, v.LAT],
            };
            v.icon = img;
            v.text = v.NAME;
            return v;
          });

          let key = arrayDataForSameIcon[0].TYPE
          if (
            Object.prototype.hasOwnProperty.call(_self.MapV.dataSetDic, key)
          ) {
            _self.MapV.dataSetDic[key].set(arrayImage);
          } else {
            let optionsICON = {
              draw: "icon",
              width: 55, // 规定图像的宽度
              height: 55, // 规定图像的高度
            };
            var optionsTEXT = {
              draw: "text",
              fillStyle: "rgba(255, 255, 255, 1)",
              size: 14,
              avoid: true, // 开启文本标注避让
              textBaseline: "middle",
              offset: {
                x: 0,
                y: 25,
              },
            };
            let dataSet = new mapv.DataSet(arrayImage);

            _self.MapV.dataSetDic[key] = dataSet;
            _self.MapV.iconLayerDic[key] = new mapv.baiduMapLayer(
              _self.map,
              dataSet,
              optionsICON
            );
            _self.MapV.textLayerDic[key] = new mapv.baiduMapLayer(
              _self.map,
              dataSet,
              optionsTEXT
            );
            for (var key1 in _self.MapV.textLayerDic) {
              _self.MapV.textLayerDic[key1].hide();
            }
          }
        };
      });
    },
    // 实时
    async getVehicleInfo () {
      var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetVehicleInfo?CLIENT_NO=00000";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      // this.form.vehicleData = [{"排队数":"3440","车辆总数":"0","出动数":"0","出动率":"50"}]
      this.form.vehicleData = data
    },
    // 昨日各类型餐饮单位收运数量及覆盖率格式
    async initWorkRatioByCartype () {
      // [{"GROUPNAME":null,"CAR_TYPE":"洗路车","ALLNUM":"93","CURRENTNUM":"57"},
      // {"GROUPNAME":null,"CAR_TYPE":"机扫车","ALLNUM":"27","CURRENTNUM":"17"},
      // {"GROUPNAME":null,"CAR_TYPE":"高压清洗车","ALLNUM":"41","CURRENTNUM":"12"},
      // {"GROUPNAME":null,"CAR_TYPE":"洒水车","ALLNUM":"55","CURRENTNUM":"16"},
      // {"GROUPNAME":null,"CAR_TYPE":"小型机扫车","ALLNUM":"25","CURRENTNUM":"5"},
      // {"GROUPNAME":null,"CAR_TYPE":"除雪车","ALLNUM":"6","CURRENTNUM":"2"},
      // {"GROUPNAME":null,"CAR_TYPE":"总计","ALLNUM":"247","CURRENTNUM":"104"}]
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkRatioByCartype'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionBarContainBarAndRatio(["覆盖率", "覆盖数", "总数"], {
        category: ["小区", "饭店", "企业"],
        // lineData: [300, 400, 600], barData: [276, 348, 336],
        // rateData: [92, 87, 56,]
      }));
      var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetPointWorkByTypeInfo?CLIENT_NO=00000";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data.rateData
        }, {
          data: data.barData
        }, {
          data: data.lineData
        }]

      });
    },
    // 保洁员出勤率
    async initWorkOnStandard_ONE () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_ONE'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionBarContainBarAndRatio(["出勤率率", "出勤数", "总数"], {
        category: ["2023-1-1", "2023-1-2", "2023-1-3", "2023-1-4", "2023-1-5", "2023-1-6", "2023-1-7"],
      }));
      // var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetPointWorkInfo?CLIENT_NO=00000"
      // //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          data: [95.2, 80.4, 90.2, 84, 96, 97.6, 88]
        }, {
          data: [239, 202, 236, 211, 241, 245, 221]
        }, {
          data: [251, 251, 251, 251, 251, 251, 251]
        }]
      });
    },
    // 水电消耗概览
    async initWorkOnStandard_FOUR () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_FOUR'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(brokenLine1());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetT0BarMultipurpose01?sqlName=dlhw&url=exec T_GetRubbishWorkInfo  '" + this.nowDate + "','" + this.ClientNo + "','车辆'"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      //data.forEach(element => {
      //  element.categories.sbuString(0,13)
      //});
      // {"categories":["武警医院","赵沽里冷库","赵沽里批发市场","海港城冷库","宽达水产（华明大道）","宽达水产（生态园）"],"data":["1","1","1","0","0","0"]}
      myChart.setOption({
        xAxis: {
          data: ["2023-1-1", "2023-1-2", "2023-1-3", "2023-1-4", "2023-1-5", "2023-1-6", "2023-1-7"]
        },
        series: [{
          name: '用水量（吨）',
          data: ["201", "198", "210", "200", "201", "190", "205"]
        }, {
          name: '用电量（度）',
          data: ["401", "298", "310", "340", "401", "390", "405"]
        }]
      });
    },
    // 服务人数前五排行
    async initWorkOnStandard_FIVE () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_FIVE'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbeH2());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose01?sqlName=dlhw&url=exec T_GetRubbishOnlineInfo '" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      myChart.setOption({
        yAxis: {
          data: ["华明大道公厕", "新中村生态公厕", "棉三内公厕", "丽新路公厕", "杨台公厕"]
        },
        series: [{
          data: ["701", "529", "480", "314", "117"]
        }]
      });
    },
    // 服务总人数概览
    async initWorkOnStandard_SIX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_SIX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=" + this.form.userName + "&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',机扫";
      // var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetTypeWeightInfo?CLIENT_NO=00000"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: ["2023-1-1", "2023-1-2", "2023-1-3", "2023-1-4", "2023-1-5", "2023-1-6", "2023-1-7"]
        },
        series: [{
          data: ["2401", "1729", "3180", "3014", "4017", "2739", "4805"]
        }]
      });
    },
    // 服务人群分析
    async initWorkOnStandard_EIGHT () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_EIGHT'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(brokenLine());
      // var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetVehicleWorkInfo?CLIENT_NO=00000"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: ["2023-1-1", "2023-1-2", "2023-1-3", "2023-1-4", "2023-1-5", "2023-1-6", "2023-1-7"]
        },
        series: [{
          name: '男',
          data: ["944", "749", "1117", "1673", "2033", "1112", "1796"]
        }, {
          name: '女',
          data: ["1457", "980", "2063", "1341", "405", "1627", "3009"]
        }]
      });
    },

    async initWorkOnStandard_NINE () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_NINE'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard1());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=dlhw&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',洗扫";
      // const { data } = await this.$Http.get(url)
      myChart.setOption({
        legend: {
          data: ['男厕', '女厕', '驻场', '不驻场']
        },
        xAxis: {
          data: ["2023-1-1", "2023-1-2", "2023-1-3", "2023-1-4", "2023-1-5", "2023-1-6", "2023-1-7"]
        },
        series: [{
          name: '男厕',
          data: ["144", "149", "117", "173", "103", "112", "126"]
        }, {
          name: '驻场',
          data: ["34", "23", "20", "31", "22", "24", "16"]
        }, {
          name: '不驻场',
          data: ["110", "126", "97", "142", "81", "88", "110"]
        }, {
          name: '女厕',
          data: ["94", "109", "217", "127", "203", "178", "169"]
        }, {
          name: '驻场',
          data: ["19", "25", "34", "16", "37", "26", "17"]
        }, {
          name: '不驻场',
          data: ["75", "84", "183", "111", "166", "152", "152"]
        }]
      });
    },
    // 差评信息统计
    async initWorkOnStandard_TEN () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_TEN'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate2());
      // var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetVehicleWInfo?CLIENT_NO=00000";
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          data: [
            { "value": 23, "name": "服务态度差" },
            { "value": 25, "name": "厕位紧张" },
            { "value": 15, "name": "环境脏乱" },
            { "value": 20, "name": "气味难闻" },
            { "value": 17, "name": "设备故障" },]
        },]
      });
    },
    // 保洁昨日总出勤率和总完成率
    async initWorkOnStandard_TWELVE () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_TWELVE'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetT0BarMultipurpose01?sqlName=dlhw&url=exec T_GetRubbishWorkInfo  '" + this.nowDate + "','0000009','垃圾点位'"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      myChart.setOption({
        yAxis: {
          max: 100
        },
        xAxis: {
          data: ["出勤率","完成率"]
        },
        series: [{
          // name:'完成率',
          data: ["98","35"]
        },]
      });
    },
    // 自动查询
    selectChange () {
      // let timeId = null
      var that = this;
      this.timeID = setInterval(() => {
        that.getVehicleInfo();
        that.getInfoList();
      }, 600000);
    },
    // 获取车辆实时列表
    async getInfoList () {
      var url =
        "http://111.160.78.62:9929/CompanyapiBDEapi/WC/GetToiletInfo?CLIENTNO=00000"
      //  +localStorage.getItem("CLIENT_NO");
      let { data } = await this.$Http.get(url);
      this.screenData(data);
    },
    // 筛选数据
    screenData (data) {
      // var listGanShui = [],
      //   listFYOUZHI = [];

      this.screeningData = [];
      var listDuli = [], listFujian = [], listYidong = [];
      data.forEach(item => {
        switch (item.TYPE) {
          case '独立式公厕':
            item.img = 'duli'
            listDuli.push(item);
            break;
          case '附建式公厕':
            item.img = 'fujian'
            listFujian.push(item);
            break;
          case '移动式公厕':
            item.img = 'yidong'
            listYidong.push(item);
            break;
        }
        this.screeningData.push(item);
      });
      this.drawMapV();
    },

    timeFn () {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading () {
      setTimeout(() => {
        this.loading = false
        this.initC();
      }, 2000)
    },
    async initWorkOnStandard_SS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_SS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=" + this.form.userName + "&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',洒水";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          data: data.dataWork
        }, {
          data: data.dataNotWork
        }, {
          data: data.dataOnStandard
        }, {
          data: data.dataNotStandard
        }]
      });
    },
    async initWorkOnStandard_CX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_CX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=" + this.form.userName + "&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',冲洗";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          data: data.dataWork
        }, {
          data: data.dataNotWork
        }, {
          data: data.dataOnStandard
        }, {
          data: data.dataNotStandard
        }]
      });
    },
    async initWorkOnStandard_XS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_XS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=" + this.form.userName + "&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',洗扫";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          data: data.dataWork
        }, {
          data: data.dataNotWork
        }, {
          data: data.dataOnStandard
        }, {
          data: data.dataNotStandard
        }]
      });
    },
    async initWorkOnStandard_JS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_JS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=" + this.form.userName + "&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',机扫";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          data: data.dataWork
        }, {
          data: data.dataNotWork
        }, {
          data: data.dataOnStandard
        }, {
          data: data.dataNotStandard
        }]
      });
    },
  }
}
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
//下方区域的布局
.content-box4 {
  grid-auto-flow: row dense;
  display: grid;
  grid-template-columns: 30% 40% 30%;
  grid-template-rows: 12% 12% 24% 24% 24%;
  grid-template-areas:
    'five two twelve'
    'five nine twelve'
    'seven nine one'
    'ten nine six'
    'four eleven eight';
}
.one {
  margin: 5px;
  grid-area: one;
  background: rgba(8, 48, 74, 0.5);
}

.two {
  margin: 5px;
  grid-area: two;
  background: rgba(8, 48, 74, 0.5);
  // grid-row-start: span 2;
}
.three {
  margin: 5px;
  grid-area: three;
  background: rgba(8, 48, 74, 0.5);
}
.four {
  margin: 5px;
  grid-area: four;
  background: rgba(8, 48, 74, 0.5);
}
.five {
  margin: 5px;
  grid-area: five;
  background: rgba(8, 48, 74, 0.5);
}
.six {
  margin: 5px;
  grid-area: six;
  background: rgba(8, 48, 74, 0.5);
}
.seven {
  margin: 5px;
  grid-area: seven;
  background: rgba(8, 48, 74, 0.5);
}
.eight {
  margin: 5px;
  grid-area: eight;
  background: rgba(8, 48, 74, 0.5);
}
.nine {
  margin: 5px;
  grid-area: nine;
  background: rgba(8, 48, 74, 0.5);
}
.ten {
  margin: 5px;
  grid-area: ten;
  background: rgba(8, 48, 74, 0.5);
}
.eleven {
  margin: 5px;
  grid-area: eleven;
  background: rgba(8, 48, 74, 0.5);
}
.twelve {
  margin: 5px;
  grid-area: twelve;
  background: rgba(8, 48, 74, 0.5);
}
.thirteen {
  margin: 5px;
  grid-area: thirteen;
  background: rgba(8, 48, 74, 0.5);
}
.fourteen {
  margin: 5px;
  grid-area: fourteen;
  background: rgba(8, 48, 74, 0.5);
}
// 底部数据
.bototm-box {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
.title {
  padding-top: 10px;
  padding-left: 20px;
  .text {
    font-size: 15px;
    color: #fff;
  }
}
.title-text {
  font-family: 'SimHei';
  font-weight: bold;
}
.bj {
  margin: 20px;
  padding: 8px;
  background: #0f5a8b;
  font-weight: 15px;
  border-radius: 5px;
}

</style>
